<template>
	<view class="content">
		<view class="tip">
			<image style="width: 200rpx;height: 200rpx;" src="../../../static/icons/tick-square.png"></image>
			<view class="text">注册成功！</view>
			<view class="text">you are all set！</view>
		</view>
		<view class="icon">
			<image style="width: 100rpx;height: 200rpx;" src="../../../static/icons/040.png"></image>
		</view>
		<view class="footer" @click="toMain">
			<image class="down" src="../../../static/icons/Arrow-Left.png"></image>
			<view class="text">上滑开启轻食之旅</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	onLoad() {},
	methods: {
		toMain() {
			uni.switchTab({
				url: '../../home/index',
				animationType: 'slide-in-bottom',
				animationDuration: 600,
				fail(err) {
					console.log(err);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, $-color-theme-1, $-color-theme-3);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.icon{
	margin-top: 50px;
}
.footer {
	position: fixed;
	bottom: 5%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	.down {
		width: 140rpx;
		height: 70rpx;
		animation-name: zoomDownIcon;
		animation-duration: 1s;
		animation-delay: 1s;
		animation-direction: alternate;
		animation-iteration-count: infinite;
	}
}
@keyframes zoomDownIcon {
	/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
	0% {
		transform: scale(1); /*开始为原始大小*/
	}
	75% {
		transform: scale(1.1);
	}
}
.tip {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	.box {
		width: 200rpx;
		height: 200rpx;
		background: #ffffff;
		border-radius: 40rpx;
		margin-bottom: 40rpx;
	}
}
.image {
	width: 72rpx;
	height: 132rpx;
	margin: 50rpx;
}
.text {
	width: 100%;
	margin: 20rpx;
	text-align: center;
	color: #ffffff;
	font-weight: 500;
}
</style>
